
<template>
<div style="margin: 0;padding: 0">
  <el-container>
    <!--页面表头设计-->
    <el-header>返工返修作业指导书</el-header>
    <el-container>


      <el-aside width="200px">

      <UseTree :data1="TreeList" @TreeClick.passive="TreeClick"></UseTree>


      </el-aside>
      <el-container>

        <!--主体设计-->
      <el-main>
          <!--左侧的工作步骤页面-->
          <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%;margin: 0;padding: 0">
            <el-tab-pane label="PFMEA" name="first">PFEMEA</el-tab-pane>

            <el-tab-pane label="拆解步骤" name="second">
              <!--拆解步骤左侧的“拆解步骤”文字描述部分-->
              <div class="stepsStyle1">
                  <UseList @picturelist="fonPicturelist"
                           @nameFormUseList.passive="nameFormUseList"
                           :children-label="ChildrenLabel"
                           :parent-label="parentLabel"
                           :label-index="labelIndex"
                           :TreeList="TreeList"
                           :language-s="languageS"
                           :TreeListAll="TreeListAll">
                  </UseList>
              </div>
              <!--拆解步骤左侧的“拆解步骤”图片、录像展示部分-->
              <div class="stepsStyle2">
                <VueImage></VueImage>
              </div>
            </el-tab-pane>

            <el-tab-pane label="失效分析" name="third">失效分析</el-tab-pane>

            <el-tab-pane label="检测标准" name="fourth">
              <div class="stepsStyle1">
                <UseListTesting
                    :children-label="ChildrenLabel"
                    :parent-label="parentLabel"
                    :workshopEnglish="workshopEnglish"
                    :taksNameEnglish="taksNameEnglish"
                    :label-index="labelIndex"></UseListTesting>
              </div>
              <!--检测侧的“拆解步骤”图片、录像展示部分-->
              <div class="stepsStyle2">
                <VueImage></VueImage>
              </div>
            </el-tab-pane>
          </el-tabs>

        </el-main>

        <!--底部的内容-->
        <el-footer>
          <el-button plain size="small" @click="languageSelectChinese">中  文</el-button>
          <el-button plain size="small" @click="languageSelectRussian">Русский язык</el-button>
          <el-button plain size="small" @click="languageSelectEnglish">English</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>

</div>
</template>

<script>
import UseList from "@/components/UseList.vue";
import VueImage from "@/components/VueImage.vue";
import UseTree from "@/components/UseTree.vue";
import UseListTesting from "@/components/UseListTesting.vue";
export default {
  name: "RepairBook",
  components:{
    UseList,
    VueImage,
    UseTree,
    UseListTesting
  },

  data() {
    return {
      activeName: 'second',//步骤显示
      //主体左侧的工作步骤栏用到的数据
      tableData: [],
      //记录页面呈现的导航信息
      TreeList:[],
      //记录后台返回的三种语言的导航信息
      TreeListAll:[],
      //点击导航栏，用到的变量
      ChildrenLabel:'no',
      parentLabel:'no',
      //记录用户选择的语言，默认为中文
      languageS:"chinese",
      //记录当前点击的车间英文名字信息
      workshopEnglish:'',
      //记录当前点击的作业指导书名称信息
      taksNameEnglish:'',
      labelIndex:1,
    }
  },
  methods: {
    handleClick(tab, event) {
      this.labelIndex=tab.index
      console.log(event,this.labelIndex)
    },
    //接收UseTree单击了导航栏后返回父组件的数据，用在根据导航栏筛选作业指导书的步骤，并显示在列表中。
    TreeClick(data,node){
      const parentNode=node.parent;
      this.ChildrenLabel=data.label;
      this.parentLabel=parentNode.label;
    },
    //接收来自于UseList组件传递出的现在点击的车间名称、作业指导书名称
    nameFormUseList(workshopEnglish,taksNameEnglish){
      this.workshopEnglish=workshopEnglish
      this.taksNameEnglish=taksNameEnglish
    },
    //点击Uselist某一行，返回子组件UseList返回图片数据
    fonPicturelist(data){
      this.picturelist=data;//"点击Uselist某一行，接收返回子组件UseList的图片数据
    },
    //当选择语言为中文时
    languageSelectChinese(){
      this.languageS="chinese"
      this.TreeList=this.TreeListAll.slice(this.TreeListAll.length/3,this.TreeListAll.length/3*2)
    },
    //当选择语言为俄文时
    languageSelectRussian(){
      this.languageS="russian"
      this.TreeList=this.TreeListAll.slice(this.TreeListAll.length/3*2,this.TreeListAll.length)
    },
    //当选择语言为英语时
    languageSelectEnglish(){
      this.languageS="english"
      this.TreeList=this.TreeListAll.slice(0,this.TreeListAll.length/3)
    },
  },
  mounted() {
    //用分装axios请求发送，并且带有头部信息
    this.$request.post("/TreeList").then(result=>{
          //判断，如果登录异常，跳转到登录页面
          if (result.code === 401){
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            this.TreeListAll=result.data;
            if (this.languageS==="chinese"){
              this.TreeList=this.TreeListAll.slice(this.TreeListAll.length/3,this.TreeListAll.length/3*2)
            }
            this.parentLabel='no'
            this.ChildrenLabel='no'
          }
    })
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/
.stepsStyle1{
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
  width: 49%;/* 每个div占据一半的宽度 */
  height: 67vh;
  overflow: scroll;
  float: left; /* 让div浮动到左边 */
  box-sizing: border-box; /* 包括padding和border在width内 */
}
.stepsStyle2{
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
  width: 49%;/* 每个div占据一半的宽度 */
  height: 67vh;
  overflow: scroll;
  float: right; /* 让div浮动到左边 */
  box-sizing: border-box; /* 包括padding和border在width内 */
}



.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>